<script setup>
// 讯飞聊天接口
// import CryptoJS from "crypto-js";
import { nextTick, ref } from "vue";
// import VueMarkdown from "vue-markdown";
import { ElMessage } from "element-plus";

import { chatHooks } from './js/chat.js'

import { VMarkdownView } from 'vue3-markdown'
import 'vue3-markdown/dist/style.css'
const mode = ref('light')

let { text, list, scrollToBottom, disabled, stopAnswer, bigModel } = chatHooks()

// 文本框的内容
let message = ref("");
// let contentFlag = ref(false);



// 发送聊天消息
const send = () => {
  if (message.value.trim().length <= 0)
    return ElMessage.error("消息不能为空哦");

  disabled.value = true;
  list.value.push({
    left: false,
    message: message.value,
  });
  text.value.push({
    role: "user",
    content: message.value,
  });

  // 存储机器人回答的消息
  list.value.push({ left: true, message: '', tips: true })

  scrollToBottom();
  bigModel.value.start(message.value)
  message.value = ''
};
// 格式化时间
const formatCurrentTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, "0");
  const day = now.getDate().toString().padStart(2, "0");
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");
  const seconds = now.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

</script>
<template>
  <el-row>
    <el-card card class="chat-box" ref="box" style="margin-top: 5px;width: 100%;">
      <!-- <el-col :span="24"> -->
      <el-row style="height: 70vh;">
        <ul id="chat-message" class="list-unstyled py-4"
          style="height: 100%;overflow-y: auto;width: 100%;overflow-x: hidden;">
          <template v-for="(item, index) in list" :key="index">
            <li v-if="!item.left" id="user-chat-question-1" :key="index" class="d-flex message message-user right"
              style="width: 98%;">
              <div class="message-body">
                <el-row :gutter="5">
                  <el-col :span="23">
                    <!-- 时间 -->
                    <span class="date-time text-muted">{{ formatCurrentTime() }}</span>
                    <!-- 内容 -->
                    <div class="message-row message-row-con">
                      <div id="message-user-chat-question-1" class="message-content p-3 text-chat"
                        style="max-width: 60%;word-wrap: break-word;padding-left: 15px;">
                        {{ item.message }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="1">
                    <div class="d-flex align-items-center justify-content-end">
                      <!-- <div class="mx-10 p-2">
                  <a href="#" class="text-dark hover-primary font-weight-bold">HOPPIN</a>
                </div> -->
                      <span class="msg-avatar">
                        <img src="https://b0.bdstatic.com/337bc39b6880696d8c230d9e09232732.jpg@h_1280"
                          class="avatar avatar-lg rounded-circle" alt="用户" />
                      </span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </li>


            <li v-else id="user-chat-question-1" class="d-flex message message-user right left" style="width: 98%;">
              <!-- :style="{ display: item.message.length > 0 ? 'block' : 'none' }"> -->
              <div class="message-body">
                <el-row>
                  <el-col :span="1.5">
                    <div class="d-flex align-items-center justify-content-end">
                      <!-- <div class="mx-10 p-2">
                  <a href="#" class="text-dark hover-primary font-weight-bold">讯飞星火</a>
                </div> -->
                      <span class="msg-avatar">
                        <img class="avatar avatar-lg rounded-circle"
                          style="height: 60px;padding: 5px;box-sizing: border-box;width: 60px;"
                          src="https://xinghuo.xfyun.cn/static/media/gpt-logo.e9ad4150a385435f5a90b50c44dad847.svg"
                          alt="讯飞星火" />
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="22">
                    <!-- 时间 -->
                    <span class="date-time text-muted">{{ formatCurrentTime() }}</span>
                    <!-- 内容 -->
                    <div class="message-row message-row-con">
                      <div id="message-user-chat-question-1" class="message-content p-3 text-chat"
                        style="border-radius: 0 10px 10px 10px;">
                        <!-- <VueMarkdown :source="item.message"> </VueMarkdown> -->
                        <!-- :style="{ visibility: item.tips ? 'visible' : 'hidden' }" -->
                        <VMarkdownView :mode="mode" :content="item.message"></VMarkdownView>
                        <p v-if="item.tips" @click="stopAnswer" class="answers">
                          停止回答
                        </p>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </li>
          </template>
        </ul>
      </el-row>
      <!-- </el-col> -->
    </el-card>

    <el-card class="chat-footer">
      <el-row>
        <el-col :span="24">
          <el-button icon="Microphone" :disabled="disabled" @click="send">
            {{ disabled ? "回答中..." : "" }}
            <img
              src=""
              alt="语音转文字">
          </el-button>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="24">
          <div class="inp">
            <el-input type="textarea" v-model="message" placeholder="请输入对话内容" col="120" rows="1" @keyup.enter="send"
              style="resize:none;font-size: 18px; " />
            <el-button icon="Promotion" :disabled="disabled" @click="send"> {{ disabled ? "回答中..." : "发送" }}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-row>
</template>


<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.message.right {
  text-align: right;
}

.chat-content .message+.message {
  margin-top: 10px;
}

// .avatar1,
// .avatar {
//   width: 60px;
//   border-radius: 50% !important;
// }

// .p-2 {
//   padding: 0.5rem !important;
// }

.message .avatar {
  width: 60px;
  border: 2px solid #21aa93;
  border-radius: 50% !important;
}

.text-muted {
  color: #95aac9;
}

.message.right .message-content {
  max-width: 60%;
  min-width: 10%;
  background-color: #f5f5f5;
  text-align: left;
  border-radius: 10px 0px 10px 10px;
}

.message .message-content {
  max-width: 60%;
  min-width: 10%;

  font-size: 16px;
  line-height: 1.6;
}

.right .message-row-con {
  display: flex;
  justify-content: flex-end;
}

.right .message-content {
  padding: 10px;
  margin-top: 5px;
}

//上层图片+讯飞回答部分
.d-flex {
  margin-top: 20px;
  // background: #21aa93;
  // width: 1580px;
}

.message.right.left {
  text-align: left;
}

.message.right.left .message-row {
  justify-content: flex-start;
}

.message.left .message-content[data-v-73c72fc6] {
  background-color: #f5f5f5;
  text-align: left;
  border-radius: 0 15px 15px 15px;
}

//最下方的输入框
.chat-footer {
  background-color: #ffffff !important;
  // padding: 0 20px;
  width: calc(100% - 340px);
  position: fixed;
  bottom: 5px;
  right: 50px;
  display: flex;
  // background-color: var(--body-color);
  padding-top: 0.5rem !important;
  // border-top: 1px solid #dee2e6;
  margin: 20px;
}

// ::v-deep .el-card__body {
//     flex: 1;
//   }

.inp {
  display: flex;
  // background-color: #95aac9;
}

.chat-footer textarea {
  flex: 10;
  border: #9c9c9c 1px solid;
  // border: none;
  outline: none;
  height: 40px;
  text-align: 40px;
}

.chat-footer button {
  flex: 1;
  background-color: #21aa93;
  color: #fff;
  width: 90px;
  height: 40px;
  border: 0;
  outline: none;
  cursor: pointer;
  margin-left: 20px;
}

.list-unstyled {
  margin-bottom: 50px;
}

.chat-box {
  margin: 20px;
}

.answers {
  transform: scale(0.9);
  font-size: 15px;
  background: #f5f5f5;
  width: 100%;
  margin: 10px 0 0 5px;
  text-align: right;
  // border-radius: 26px 0;
  cursor: pointer;
}


.markdown-body {
  padding: 8px;
}
</style>
